<template>
	<view class="top-content" v-for="(item,index) in collectList" :key="index" @tap="tapPostD(item.postId)">
		<view class="content-headImage">
			<view class="content-headImage-item">
				<view>
					<image :src="'http://127.0.0.1:8080' + item.avatar"></image>
				</view>
				<view>{{item.nickName}}</view>
				<!-- 收藏图片 -->
				<view class="content-button">
					<view class="content-button-item" @click="handleCollectClick(index,item.postId,item.userId)">
						<image :src="item.isCollect==1&&collectedStatuses[index] ? noCollect : Collected"></image>
					</view>
				</view>
			</view>
			<view class="content-headImage-text">
				<view>{{item.title}}</view>
			</view>
			<view class="content-Image-item" v-show="item.imgUrl">
				<image v-for="(item1,index1) in item.imgUrl" :key="index1" :src="item1" @tap.stop="tapImage(item1)">
				</image>
				<video v-show="item.videoUrl" v-for="(item2, index2) in item.videoUrl" :key="index2"
					:src="item2"></video>
			</view>
		</view>
		<view class="content-Image-item-icon">
			<!-- <view class="child" @tap.stop="actionsClick()">
				<image src="/static/images/banner/share.png"></image>
				<view>分享</view>
			</view> -->
			<view class="child" @tap="tapPostD(item.postId)">
				<image src="/static/images/banner/comment.png"></image>
				<view>评论</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		delCollectDel,
		listCollect
	} from '@/api/collect.js'
	import {
		getUser
	} from '@/utils/auth'
	import {
		addOk2,
		listOk
	} from '@/api/ok'
	onMounted(() => {
		listCollect1()
	})
	const collectList = ref([])
	//取出当前登陆人的userid
	const userid = getUser()
	const collectedStatuses = ref(new Array(collectList.value.length).fill(true));
	const noCollect = ref('../../static/images/icon/collect01.png')
	const Collected = ref('../../static/images/icon/collect03.png')
	//设置层级初始值
	const leState = ref(false)
	//将接口封装为方法
	const listCollect1 = (() => {
		// console.log(userid,'userid.value')
		listCollect({
			userId: userid
		}).then((res) => {
			console.log(res.rows, '9999')
			//对图片进行处理(转化为数组形式)
			for (let i = 0; i < res.rows.length; i++) {
				if (res.rows[i].imgUrl) {
					res.rows[i].imgUrl = JSON.parse(res.rows[i].imgUrl)
				}
				if (res.rows[i].videoUrl) {
					res.rows[i].videoUrl = JSON.parse(res.rows[i].videoUrl)
				}
			}
			collectList.value = res.rows
		})
	})
	const tapPostD = ((id) => {
		// console.log("点击了帖子详情")
		if (leState.value == false) {
			uni.navigateTo({
				url: '/pages/postDetail/index?data=' + id
			})
		}
	})
	const handleCollectClick = ((index, id, userid) => {
		leState.value = true
		//定时，消除层级关系
		setTimeout(() => {
			leState.value == false
			delCollectDel({
				postId: id,
				userId: userid
			}).then((res) => {
				console.log(res, '取消收藏成功')
				// 点击时反转当前index的状态
				collectedStatuses.value[index] = !collectedStatuses.value[index];
				//刷新列表
				listCollect1()
			})
		}, 1000)
	})
	//点击图片预览事件
	function tapImage(item1) {
		//阻止事件冒泡
		// event.stopPropagation();
		//预览图片
		uni.previewImage({
			urls: item1.split(","),
			current: item1,
			loop: true
		})
		console.log('点击了图片')
	}
	//点击分享
	function actionsClick() {
		uni.showToast({
			title: '分享',
			icon: 'none'
		})
	}
</script>

<style lang="scss" scoped>
	page {}

	.top-content {
		margin: 15rpx;
		border-radius: 15rpx;
		background-color: #fff;
		border: 2rpx solid #84AED0;
		.content-headImage {
			padding: 20rpx;
			margin-bottom: 10rpx;

			.content-headImage-item {
				display: flex;
				align-items: center;
				position: relative;

				image {
					margin-right: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.content-button {
					position: absolute;
					top: 0rpx;
					right: 20rpx;

					image {
						margin-bottom: 10rpx;
						width: 35rpx;
						height: 35rpx;
					}
				}
			}

			.content-button-item {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				font-size: 24rpx;
				color: #FF8C00;
			}

			.content-headImage-item view:nth-child(2) {
				font-size: 30rpx;
			}

			.content-headImage-text view:nth-child(1) {
				margin-top: 10rpx;
				font-size: 30rpx;
			}

			.content-Image-item {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				/* 创建3列 */
				grid-gap: 10rpx;

				/* 格子之间的间距 */
				image {
					border-radius: 10rpx;
					width: 340rpx;
					height: 340rpx;
					object-fit: cover;
				}

				video {
					width: 340rpx;
					height: 340rpx;
					object-fit: cover;
				}
			}
		}

		.content-Image-item-icon {
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;

			.child {
				display: flex;

				view {
					margin-left: 20rpx;
				}
			}

			image {
				margin-bottom: 10rpx;
				width: 35rpx;
				height: 35rpx;
			}
		}
	}
</style>